<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.4/themes/eggplant/jquery-ui.css" />

<script src='https://www.google.com/jsapi'></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script src="/js/icons.js"></script>


<script>


function drawMap(){

	console.log("valid button chkd1 " +   jQuery('#valid').is(':checked') );

	    var validFlag = jQuery('#valid').is(':checked');

		var geocoder, mapOptions;
		var map, pointarray, heatmap;
	    var categories = [] ;
	
			var lat = 38.3869906;
			var lng = 27.1597811;
			latlng = new google.maps.LatLng(lat, lng);
			pointarray = [];
			userData = [];

		    mapOptions = {
				zoom : 13,
				center : latlng,
				mapTypeId : google.maps.MapTypeId.SATELLITE
			};		

		     var categoriesURL= "/json/categories.json";       
	         
	          jQuery.getJSON( categoriesURL, function( json ) {      

	          	   jQuery.each(json, function(key, val) {          
	          		  categories[val.categoryId]=val.name;   	         		   
	          	   });
	          	  // console.log("category2 " + categories[2]);	           	  
	          	 }).fail(function( jqxhr, textStatus, error ) {
	          	    var err = textStatus + ", " + error;
	          	    console.log( "Extract JSON from categories error: " + err );
	          	});   	 
							
	
			map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);
	

		  var reportDataURL = //"https://code.google.com/p/athena-json/source/browse/trunk/izmir-earthquake-scenario-reports.json";   
			// "/json/userData.json";	
			// "/json/userDataSingleTest.json"	
			"/json/izmir-earthquake-scenario-reports.json";

		  jQuery.getJSON(reportDataURL,						
		    function(data) {
    
			  jQuery.each(data, function(key, val) {

				 if (validFlag && val.validationStatus==0 )
					 return true;
											
				var reportLatlng = new google.maps.LatLng(
										val.reportLocation.lat,
									    val.reportLocation.lng);      	    
			    var pinIcon;
                switch(val.reportCategoryID){
                case 1:
                	 pinIcon= natural_disaster_red_pin;
                    break;
                case 2: 
                    pinIcon= fire_red_pin;
                    break;
                case 7: 
                    pinIcon= infrastructure_red_pin;
                    break;
                case 9: 
                    pinIcon= transport_red_pin;
                    break;                
                case 10: 
                    pinIcon= medical_red_pin;
                    break;         
                               
                 default:
                     pinIcon=red_pin;
                }

				var hrefLink, imageTag, imageLink;
				if (Boolean(val.media.reportImages[0])) {
					hrefLink= '<a href= "' + val.media.reportImages[0].url + '" target="_blank">  link to image</a>'
					imageTag= 	'<img src="' + val.media.reportImages[0].url + '" alt="image in infowindow" height="52" width="52"    >';
					imageLink = '<a href= "' + val.media.reportImages[0].url +'" target="_blank"> ' + imageTag + '</a>';
				}
				else {
					imageLink = "";
					hrefLink = "no image available"
					imageTag = "";
				};

				//var datePosted = new Date(Date.parse(val.reportTimestamp, "Y-m-d") );
         
				jQuery
				.ajax({
					type : "POST",
					url : "/infoWindow.groovy",
					cache : false,
					data : "time=" + val,
					success : function(info) {
						//console.log(" in ajax success timesince " + timeSince);
			
						var infoString = info;
						console.log("heloo");

						console.log("info is " + info);
					
						var infowindow = new google.maps.InfoWindow(
													{content : infoString});
						var titleString = 'Report Category:' + val.reportCategory;
						var marker2 = new google.maps.Marker({
			   		    					position : reportLatlng,
				     						map : map,
										    icon : pinIcon,
											title : titleString
											});
						google.maps.event.addListener(marker2, 'click',
							function() {
							           infowindow.open(map, marker2);
								   	});
						
					},
					error : function(jqXHR, textStatus, errorThrown) {
						closeModal();
						alert("error in time ajax" + textStatus + " errorThrown is: "
								+ errorThrown);
					}
				});
				//console.log("date" + datePosted  + " timesince " + timeSinceJ);

			   	
				  });

			  
				}).fail(function(jqxhr, textStatus, error) {
						var err = textStatus + ", " + error;
						console.log("getJSON Request Failed in draw map: " + err);
			});
		};

		jQuery("#clearMap").click(function() {
			console.log("map clear selected");
			setUpMap();
		});
		jQuery("#clearMap").click(function() {
			console.log("map clear selected");
			setUpMap();
		});

</script>
 <script>
  jQuery(function() {
    jQuery( "#check" ).button();
    jQuery( "#format" ).buttonset();
    
  });

  </script>


<style>
#map-canvas {
	width: 800px;
	height: 700px;
}

.levels {
  color:green;
}


body {
	font-family: arial; /* Font */
	font-size: 12px; /* Font Size */
}
</style>

</head>
<title>Athena</title>
<body>
	<h1>Athena CCCID Map</h1>
 
<div id="format">
  <input type="checkbox" id="valid"><label for="valid" title="Select to see only reports with validation status 1">V</label>
  <input type="checkbox" id="check2"><label for="check2" title="Select to see only unread reports">R</label> 
</div>
	<div id="map-canvas"></div>
	<p id="clearMap"> clear map </p>
</body>
<script>drawMap()</script>

  <script>
  jQuery('#valid').bind('change', function(){

	     drawMap();
	    if(jQuery(this).is(':checked')){
	        console.log("valid button pressed"); // box was checked
	    }
	});    
  </script>
</html>